<template>
  <div class="swiper">
    <!-- 轮播图组件 -->
    <van-swipe class="my-swipe" :autoplay="2000" >
      <van-swipe-item v-for="(item,index) in swiperlist" :key="index">
        <img :src="item.pic" alt="">
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import {banner_list} from '../utils/api'

export default {
  data(){
    return{
      swiperlist:[
      {
          pic:"https://ts1.cn.mm.bing.net/th/id/R-C.cd14294b03a41493d9da5d85c8c6a64a?rik=e041u2KxLC3FcA&riu=http%3a%2f%2fwww.jijidian.cn%2fuploads%2f20200910%2fcd14294b03a41493d9da5d85c8c6a64a.png&ehk=LvQed2I60DBL9T3YHoFFP0xvfh6hkHbBnEqjHq2jN8Y%3d&risl=&pid=ImgRaw&r=0"
        },
        {
          pic:"https://img.zcool.cn/community/019ddb5a2e565ea80120ba3850ec00.jpg@1280w_1l_2o_100sh.jpg"
        },
        {
          pic:"https://pic2.zhimg.com/v2-52812fef888708735b97f924ea31f4a5_180x120.jpg"
        },
      ],
    }
  },
  mounted(){
    // banner_list().then((res)=>{
    //   this.bannerlist = res.data.list;
    //   console.log(this.bannerlist);
    //   console.log(this.bannerlist.bannerUrl);
    // })
  }
}
</script>

<style lang='scss' scoped>
.home{
  height: 300px;
  // background-color: lightcoral;
}
.my-swipe img{
  width: 100%;
  height: 150px;
  margin-top: 5px;

}
</style>